<template>
  <div class="edit-component">
    <el-form  :inline="true" :model="formData" ref="formData" :rules="validatorRules">
      <el-form-item label="姓名" prop="name">
        <el-input  v-model="formData.name" :minlength="1" :maxlength="20" placeholder="请输入姓名"></el-input>
      </el-form-item>
      <el-form-item label="电话" prop="phone">
        <el-input v-model="formData.phone" placeholder="请输入电话"></el-input>
      </el-form-item>
      <el-form-item label="账号" prop="account">
        <el-input v-model="formData.account" maxlength="20" placeholder="请输入账号" :disabled="rowId!=''"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password" v-if="!rowId">
        <el-input type="password" v-model="formData.password"  maxlength="20"  placeholder="请输入密码"></el-input>
      </el-form-item>
      <el-form-item label="邮箱" prop="email">
        <el-input v-model="formData.email"  maxlength="20"  placeholder="请输入邮箱"></el-input>
      </el-form-item>
      <el-form-item label="角色" prop="roleId">
        <el-select multiple v-model="formData.roleId" placeholder="请选择角色">
          <el-option v-for="item in roleList" :label="item.name" :value="item.id" :key="item.id" ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="状态" prop="status">
		  <el-radio v-for="item in userStatusList" v-model="formData.status" :label="item.code" :key="item.id">{{item.name}}</el-radio>
      </el-form-item>
       <!-- <el-form-item label="备注" prop="remark" class="textarea">
        <el-input type="textarea" v-model="formData.remark"  maxlength="200"  placeholder="请输入备注"></el-input>
      </el-form-item> -->
    </el-form>
	<div class="button-bar">
	  <el-button @click="cancel">取 消</el-button>
	  <el-button type="primary" @click="submit" :loading="btnLoading">确 定</el-button>
	</div>

     <!-- 部门-区域树选择面板 -->
      <el-dialog class="tree-dialog" width="30%" :title="tree.treeTitle" :visible.sync="tree.showTreeDialog" append-to-body>
          <el-tree  :data="tree.treeData" show-checkbox check-strictly node-key="id"  ref="eltree" @check="onNodeCheked"></el-tree>
          <div class="button-bar">
              <el-button @click="onCancelTree">取 消</el-button>
              <el-button type="primary" @click="onConfirmTree">确 定</el-button>
          </div>
      </el-dialog>
  </div>
</template>
<script>
import treeMinxin from "@/components/tree/tree.mixin.js"
import { mapGetters } from "vuex";
import Md5 from 'js-md5'
export default {
  mixins: [treeMinxin],
  props:{
    rowId:{
      type:String,
      default:"",
      required:true,
    },
	userStatusList:{
		type:Array,
		default:()=>[],
		required:true
	},
	roleList:{
		type:Array,
		default:()=>[],
		required:true
	}
  },
  data() {
    var _this=this
    return {
      formData: {
        id:'',
        name: "",
        phone: "",
        account: "",
        email: "",
        password: "",
        userType: "",
        remark: "",
        status: "1",
        roleId: [],
        areaName:'',
        areaId:'',
        deptName:'',
        deptId:'',
      },
      validatorRules:{
          name:[
            {required: true, message: '请输入', trigger: 'blur'},
            {max: 20, message: '不超过20个字符', trigger: 'change'},
          ],
          phone:[
			{required: false, message: '请输入', trigger: 'blur'},
            {validator:this.telChecker,  trigger: 'change'},
          ],
          account:[
            {required: true, message: '请输入', trigger: 'blur'},
            {min: 6, message: '不少于6位', trigger: 'change'},
            {validator:this.accountChecker, trigger: 'change'},
          ],
          password:[
            {required: !_this.rowId, message: '请输入', trigger: 'blur'},
            {min: 6, message: '不少于6位', trigger: 'change'},
          ],
          email:[
            {type: 'email', message: '格式有误', trigger: 'change'},
          ],
          // roleIds:[
          //   {required: true, message: '请选择', trigger: 'change'},
          // ],
          // status:[
          //   {required: true, message: '请选择', trigger: 'change'},
          // ],
          
      },
	  btnLoading:false
    };
  },
  watch:{
    rowId(vv){
		if(vv){
			this.initFormData()
		}else{
			this.clearForm()
		}
    }
  },
  methods: {
    //初始化表单数据
    initFormData(){
      if(!this.rowId){
			return
		}
      this.$http.getUserDetail({id:this.rowId})
      .then(res => {
		  var data=res.data.data;
		  if(data){
			  this.formData = data;
			  this.formData.roleId=this.formData.roleId !="" ? this.formData.roleId.split(",") :[];
			  this.formData.status=this.formData.status.toString()
		  }else{
			  this.clearForm()
		  }
		}).catch(err => {
		  throw(err)
		});
    },

    submit() {
      var isValidate=false
      this.$refs.formData.validate((bool)=>{
          if(bool){
            isValidate=true
          }
      })
      if(!isValidate){return}

      if(this.rowId){
          delete this.formData.password
      }else{
         this.formData.password=Md5(this.formData.password)
      }
	  this.formData.roleId=this.formData.roleId.toString()
      let submit = {
        ...this.formData,
        moduleName:"用户管理"
      };
      this.btnLoading=true
      this.$http.editUser(submit)
      .then(res => {
          this.$message.success("提交成功！");
		  this.$emit("refresh")
		  this.$emit("closeDialog")
		  this.btnLoading=false
        }).catch(err => {
			this.btnLoading=false
          throw(err)
        })
      
    },
	
	cancel(){
		this.$emit("closeDialog")
	},
	
	clearForm(){
		for(var key in this.formData){
			if(Array.isArray(this.formData[key])){
				this.formData[key]=[]
			}else{
				this.formData[key]=""
			}
		}
	},

    accountChecker(rule, value, callback){
      var reg = /^[0-9a-zA-Z]*$/;
      if (!reg.test(value)) {
        callback(new Error('只能是数字或字母'));
      } else {
        callback();
      }
    },
	
    telChecker(rule, value, callback){
      if(!value.match(/^\d*$/g)){//全为数字字符串
        callback(new Error('格式有误'));
      }else if (value.length!==0 && (value.length>12 || value.length<8)){
        callback(new Error('格式有误'));
      } else{
        callback()
      }
    },
	
	transData(data){
		
	}
  },
  created(){
	this.initFormData()
   
  }
};
</script>
<style scoped lang='scss'>
/* #user-edit {
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    .button-bar{
        padding: 20px ;
    }
    /deep/ .el-form{
      padding: 0px 30px;
      flex: 1;
      overflow: auto;
       /deep/ .el-textarea {
                position: relative;
                display: inline-block;
                width: 560px;
                height: 200px;
                vertical-align: bottom;
                font-size: 14px;
                textarea{
                    height: 100%;
                }
            }
            .el-date-editor.el-input, .el-date-editor.el-input__inner {
              width: 203px;
          }
      .el-input-group__append{
        padding:0px;
        width:38px;
        text-align:center;
        .iconfont{
          display:inline-block;
          width:100%;
          height: 38px;
          line-height: 38px;
        }
      }
     
    }
}

.tree-dialog{
    .button-bar{
      text-align:center;
    }
} */
</style>

